<template>
    <div class="box">
        
        <Child :info="info" :intro="intro">
            <template v-slot:default>
                胡歌
            </template>
            <template v-slot:boy>
                王凯
            </template>
            <!-- 解构数据 -->
            <template v-slot:dog="{ info, intro, hobby }">
                <div>大狗</div>
                <div>名字: {{ info.name }}</div>
                <div>年龄: {{ info.age }}</div>
                <div>介绍: {{ intro }}</div>
                <div>爱好: {{ hobby }}</div>
            </template>
            <!-- <template v-slot:dog="qwer">
                <div>大狗</div>
                <div>{{ qwer }}</div>
                <div>名字: {{ qwer.info.name }}</div>
                <div>年龄: {{ qwer.info.age }}</div>
                <div>介绍: {{ qwer.intro }}</div>
                <div>爱好: {{ qwer.hobby }}</div>
            </template> -->
        </Child>
        

        <Child2 :info="info" :intro="intro" v-slot="{ info, intro, hobby }">
            <div>名字: {{ info.name }}</div>
            <div>年龄: {{ info.age }}</div>
            <div>介绍: {{ intro }}</div>
            <div>爱好: {{ hobby }}</div>
        </Child2>

        <Child2 :info="info" :intro="intro" #default="{ info, intro, hobby }">
            <div>名字: {{ info.name }}</div>
            <div>年龄: {{ info.age }}</div>
            <div>介绍: {{ intro }}</div>
            <div>爱好: {{ hobby }}</div>
        </Child2>
    </div>
</template>

<script type="text/ecmascript-6">
// 插槽
// 什么是插槽?
//      在子组件内部开一个槽,这个槽里面可以默认放一些内容,当然也可以由父组件来填充
//      父组件怎么填充这个槽?
//      父组件中写子组件的标签之中,写内容,会被填充到这个槽中
// 默认插槽
//      子组件
//          <div class="box">
//              <h4>Child组件</h4>
//              <slot>这是默认内容</slot>
//          </div>
//      父组件
//          <Child>
//              父组件写的内容
//          </Child>
//          这个是简写,下面的是全写
//          <Child>
//              <template v-slot:default>
//                  父组件写的内容
//              </template>
//          </Child>
// 具名插槽
//      具有名字的插槽叫具名插槽
//      子组件
//          <div class="box">
//              <h4>Child组件</h4>
//              <div class="box1">
//                  <slot>这是默认内容</slot>  ----> 默认插槽本质上的name是 default
//              </div>
//              <hr>
//              <div class="box2">
//                  <slot name="boy">哈哈哈</slot>  ----> 给slot标签起一个名字,叫 boy
//              </div>
//          </div>
//      父组件
//          <Child>
//              <template v-slot:default> --- 放在默认插槽的位置
//                  胡歌
//              </template>
//              <template v-slot:boy>  --- 这个放在子组件 slot 标签name是 boy 的位置
//                  王凯
//              </template>
//          </Child>
// 作用域插槽
//      父组件传递模板给子组件,没有问题
//      期望: 父组件根据子组件的数据,来写出模板,在传递给子组件
//            此时就要用到作用域插槽
//      子组件
//          <div class="box">
//              <div class="box3">
//                  <slot name="dog" :info="info" :intro="intro" hobby="烫头">小狗</slot>
//              </div>
//          </div>
//          子组件中,slot标签上name属性是起的名字
//                  其他的属性将会合成一个对象,传给父组件中的模板
//      父组件
//          <Child :info="info" :intro="intro">
//              <template v-slot:dog="qwer">
//                  <div>大狗</div>
//                  <div>{{ qwer }}</div>
//              </template>
//          </Child>
//          父组件中 v-slot:dog="qwer"
//                  v-slot 是指令
//                  dog 是子组件中slot起的名字
//                  qwer 是一个变量,接收的是 子组件绑定在slot标签上的属性组成的对象
// 作用域组件只有一个插槽的时候,可以简写
//      子组件中只有一个插槽的时候(默认插槽),此时可以将v-slot指令放到组件标签上,省略template
//      父组件
//          <Child2 :info="info" :intro="intro" v-slot="{ info, intro, hobby }">
//              <div>名字: {{ info.name }}</div>
//              <div>年龄: {{ info.age }}</div>
//              <div>介绍: {{ intro }}</div>
//              <div>爱好: {{ hobby }}</div>
//          </Child2>
// 注意:
//      v-slot 指令是可以简写的,简写为  #
// 在哪见过slot?
//      element ui 中都是slot写的
import Child from './Child.vue'
import Child2 from './Child2.vue'
export default {
    name: 'SlotTest',
    components: { Child, Child2 },
    data() {
        return {
            info: {
                name: '旺财',
                age: 3
            },
            intro: '旺财,我明年旺不旺?'
        }
    },
}
</script>
